<h1 id="title" class="title">登录</h1>
<p class="sub-title">欢迎使用账号密码登录！</p>

<nb-alert *ngIf="showMessages?.error && errors?.length && !submitted" outline="danger" role="alert">
  <p class="alert-title"><b>出错了!</b></p>
  <ul class="alert-message-list">
    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
  </ul>
</nb-alert>

<nb-alert *ngIf="showMessages?.success && messages?.length && !submitted" outline="success" role="alert">
  <p class="alert-title"><b>欢迎!</b></p>
  <ul class="alert-message-list">
    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
  </ul>
</nb-alert>

<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">

  <div class="form-control-group">
    <label class="label" for="input-email">用户名:</label>
    <input nbInput
           fullWidth
           [(ngModel)]="user.key"
           #email="ngModel"
           name="email"
           id="input-email"
           pattern=".+.+"
           placeholder="用户名"
           fieldSize="large"
           autofocus
           (input)="getSorage()"
           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : 'basic'"
           [required]="getConfigValue('forms.validation.email.required')"
           [attr.aria-invalid]="email.invalid && email.touched ? true : null">
    <ng-container *ngIf="email.invalid && email.touched">
      <p class="caption status-danger" *ngIf="email.errors?.required">
        请输入用户名!
      </p>
      <p class="caption status-danger" *ngIf="email.errors?.pattern">
        用户名不合法!
      </p>
    </ng-container>
  </div>

  <div class="form-control-group">
    <span class="label-with-link">
      <label class="label" for="input-password">密码:</label>
      <a class="forgot-password caption-2" routerLink="../request-password">忘记密码?</a>
    </span>
    <input nbInput
           fullWidth
           [(ngModel)]="user.pwd"
           #password="ngModel"
           name="password"
           type="password"
           id="input-password"
           placeholder="密码"
           fieldSize="large"
           [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : 'basic'"
           [required]="getConfigValue('forms.validation.password.required')"
           [minlength]="getConfigValue('forms.validation.password.minLength')"
           [maxlength]="getConfigValue('forms.validation.password.maxLength')"
           [attr.aria-invalid]="password.invalid && password.touched ? true : null">
    <ng-container *ngIf="password.invalid && password.touched ">
      <p class="caption status-danger" *ngIf="password.errors?.required">
        请输入密码!
      </p>
      <p class="caption status-danger" *ngIf="password.errors?.minlength || password.errors?.maxlength">
        密码必须包含从
        {{ getConfigValue('forms.validation.password.minLength') }}
        到 {{ getConfigValue('forms.validation.password.maxLength') }}
        字段
      </p>
    </ng-container>
  </div>

  <div class="form-control-group accept-group">
    <nb-checkbox name="rememberMe" [(ngModel)]="isRemember" *ngIf="rememberMe">记住我</nb-checkbox>
  </div>

  <button nbButton
          fullWidth
          status="primary"
          size="large"
          [disabled]="submitted || !form.valid"
          [class.btn-pulse]="submitted">
    登录
  </button>
</form>

<section class="another-action" aria-label="Register">
  还没有账号? <a class="text-link" routerLink="../register">注册</a>
</section>

